<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from 'vue'
import DetailTable from '@/views/project-update/inventory-review/project-inventory/detail-table.vue'
import { queryArea } from '@/api/question'
import {
  addProjectInventory,
  updateProjectInventory,
} from '@/api/project-update/project-inventory'
import { Message, MessageBox } from 'element-ui'
import { getApprovalList, performApprovals } from '@/api/project-update/apply'
import ChangeLog from '@/views/project-update/components/change-log.vue'
import { PERMISSIONS } from '@/common/user'

const vm = getCurrentInstance()

const userLevel = JSON.parse(localStorage.getItem('user') || '{}')?.user
  ?.roleLevel

const route = vm.proxy.$route
const router = vm.proxy.$router
const currentUser = vm.proxy.$store.state.user.currentUser

const params = route.query
const { pkid, es: status, status: applyStatus } = params

const detailTableRef = ref()

const handleCancel = () => {
  router.go(-1)
}

const handleSaveClick = (status) => {
  const data = detailTableRef.value.getSubmitData()
  // console.log(data)
  const params = {}
  if (status == 1) {
    params.type = 'waiting'
  }
  let promise
  if (pkid) {
    promise = updateProjectInventory(data, params)
  } else {
    promise = addProjectInventory(data, params)
  }
  promise.then((res) => {
    if (res.success) {
      Message.success(res.data)

      router.go(-1)
    } else {
      Message.error(res.message)
    }
  })
}

const handleChangeClick = () => {
  const data = detailTableRef.value.getSubmitData()
  updateProjectInventory(data, {
    type: 'change',
  }).then((res) => {
    if (res.success) {
      Message.success(res.data)
      router.go(-1)
    } else {
      Message.error(res.message)
    }
  })
}

const handlePassClick = () => {
  MessageBox.confirm('确认审核通过？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    performApprovals({
      businessId: pkid,
      type: 2,
      nodeName: 'finish',
    }).then((res) => {
      if (res.success) {
        Message.success(res.data)
        router.go(-1)
      } else {
        Message.error(res.message)
      }
    })
  })
}

const handleRejectClick = () => {
  MessageBox.prompt('请输入审核意见', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputErrorMessage: '请输入退回原因',
  }).then(({ value }) => {
    console.log('reject', value)
    performApprovals({
      businessId: pkid,
      type: 2,
      nodeName: 'back',
      operationRecord: value,
    }).then((res) => {
      if (res.success) {
        Message.success(res.data)
        router.go(-1)
      } else {
        Message.error(res.message)
      }
    })
  })
}

const changeLogShow = ref(false)
const handleShowChangeLog = () => {
  changeLogShow.value = true
}

const applyInfo = ref({})

const getApplyInfo = () => {
  if (!pkid) return
  getApprovalList(pkid).then((res) => {
    if (res.success) {
      if (res.data.length) {
        applyInfo.value = res.data[0]
      }
    }
  })
}

onMounted(() => {
  // if (status === 'detail') {
  getApplyInfo()
  // }
})
</script>

<template>
  <div class="add-month-report show-detail-form">
    <div class="nav">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            :to="{ path: '/project-update/project-inventory' }"
            ><span class="breadcrumb-title">列表</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>{{
            status ? '详情' : '填报'
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <div class="content-main">
        <div class="detail-top" v-show="applyInfo.id || status === 'detail'">
          <div class="apply-remark" v-if="applyInfo.id">
            <span>审核时间：{{ applyInfo.createTime }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>审核人员：{{ applyInfo.createBy }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>审核结果：{{ applyInfo.processResults }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>审核意见：{{ applyInfo.operationRecord }}</span>
          </div>
          <el-button
            v-if="status === 'detail'"
            class="change-button"
            type="primary"
            @click="handleShowChangeLog"
            >变更记录</el-button
          >
        </div>
        <detail-table
          ref="detailTableRef"
          :pkid="pkid"
          :disabled="!!status"
          :user-level="userLevel"
        />
      </div>
      <div class="buttons">
        <el-button class="cancel" @click="handleCancel">取消</el-button>
        <template v-if="!status">
          <template v-if="applyStatus === 'finish'">
            <el-button
              class="save"
              type="primary"
              @click="handleChangeClick"
              v-if="currentUser?.hasPermission(PERMISSIONS.项目入库变更)"
            >
              {{ currentUser?.getButtonName(PERMISSIONS.项目入库变更) }}
            </el-button>
          </template>
          <template v-else>
            <el-button class="save" type="primary" @click="handleSaveClick(0)"
              >保存</el-button
            >
            <el-button class="publish" @click="handleSaveClick(1)"
              >提交</el-button
            >
          </template>
        </template>
        <template v-else-if="status === 'apply'">
          <el-button
            class="save"
            type="primary"
            @click="handlePassClick"
            v-if="currentUser?.hasPermission(PERMISSIONS.项目入库通过)"
          >
            {{ currentUser?.getButtonName(PERMISSIONS.项目入库通过) }}
          </el-button>
          <el-button
            class="publish"
            @click="handleRejectClick"
            v-if="currentUser?.hasPermission(PERMISSIONS.项目入库退回)"
          >
            {{ currentUser?.getButtonName(PERMISSIONS.项目入库退回) }}
          </el-button>
        </template>
      </div>
    </div>
    <change-log
      :visible="changeLogShow"
      :id="pkid"
      @closeDialog="changeLogShow = false"
    />
  </div>
</template>

<style scoped lang="scss">
.add-month-report {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  background-color: rgba(244, 248, 254, 1);

  .content {
    width: calc(100% - 40px);
    height: calc(100% - 70px);
    position: absolute;
    top: 65px;
    bottom: 0;

    .divider {
      width: 100%;
      height: 1px;
      background: #e7f0ff;
      border-radius: 1px 1px 0px 0px;
      margin: 20px 0;
    }

    .content-main {
      height: calc(100% - 100px);
      background: #ffffff;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      padding: 13px 16px 13px 16px;
      overflow-y: auto;

      .detail-top {
        height: 40px;
        display: flex;
        margin-bottom: 5px;
        justify-content: space-between;

        .apply-remark {
          font-size: 14px;
          width: 100%;
          margin-top: 10px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          color: rgba(61, 161, 210, 1);

          .el-divider {
          }
        }

        .el-button {
          margin-right: 12px;
        }
      }
    }

    .buttons {
      padding: 10px;
      display: flex;
      justify-content: center;
      background: #ffffff;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);

      .el-button {
        width: 110px;
      }

      .cancel {
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e7f0ff;
        font-weight: 400;
        font-size: 16px;
        color: #8894a8;
      }

      .save {
        //background: #10a6dd;
        border-radius: 4px;
        //color: #ffffff;
      }

      .publish {
        //background: #ffffff;
        border-radius: 4px;
        //color: #10a6dd;
        //border: 1px solid #10a6dd;
      }
    }
  }
}
</style>
